<template>
    <div class="fl">
        <div class="fl-container">
            <div class="hd">
                <a class="more" href="/loveflower">
                    更多爱情鲜花
                    <span class="icon icon-arrow-right"></span>
                </a>
                <h3 style="margin:0px;">
                    <a href="/loveflower">爱情鲜花</a>
                    <span>送 · 让你怦然心动的人</span>
                </h3>
            </div>
            <div class="bd">
                <div class="bd-l">
                    <div class="banner-box">
                        <el-image :src="require('../assets/image/home_floor_lover.png')" width="288" height="656"></el-image>
                    </div>
                </div>
                <div class="fl-products">
                    <div v-for="item in images" :key="item" class="fl-products-item">
                        <a :href=item.href target="_blank">
                            <div class="img-box">
                                <el-image :src="require('../assets' + item.imageUrl)" width="220" height="240"></el-image>
                            </div>
                            <div class="product-content">
                                <p class="product-title">{{ item.productTitle }}</p>
                                <p class="product-sub" v-if="item.productSub">{{ item.productSub }}</p>
                                <p style="height: 25px" v-if="!item.productSub"></p>
                                <p class="product-price">
                                    <span class="price-sign">¥</span>
                                    <span class="price-num" data-pp="9012676">{{ item.priceNum }}</span>
                                </p>
                                <p class="product-sell">{{ item.productSell }}</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </template>

<script>
import { ref, onMounted } from "vue";
import { getProductItemsApi } from '../http/index'
const images = ref();

export default {

    setup() {

        onMounted(async () => {
            images.value = (await (getProductItemsApi())).data
        })

        return {         
            images    
        }

    }

}
</script>

<style lang="scss">
/*
.fl:first-child + .fl, .fl:first-child + .fl + .fl + .fl, .fl:first-child + .fl + .fl + .fl + .fl + .fl {
    background-color: #E9ECF0;    
}
.fl:nth-child(even) {
    background-color: #E9ECF0;
}
*/
div, ol, p, input, span, label {
    border: 0;
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
a,a:link,a:visited,a:hover,a:active {
    text-decoration: none;
    color: inherit
}
a:hover,.fl .container-a > div a:hover {
    color: #FF734C
}
.fl {
    width: 100%;
    font-size: 0;
    background-color: #E9ECF0;  
}
.fl-container {
    width: 1200px;
    margin: 0 auto;
    padding: 40px 0 60px;
}
.fl-container .hd h3 {
    font-size: 26px;
    line-height: 30px;
    color: #232628;
    font-weight: bold;
    text-align: left !important;
}
.fl-container .hd h3 span {
    padding-left: 15px;
    margin-left: 16px;
    font-size: 20px;
    line-height: 24px;
    font-weight: normal;
    border-left: 1px solid #71797F
}
.fl-container .hd .more {
    font-size: 14px;
    line-height: 30px;
    color: #71797F;
    float: right
}
span.icon {
    display: inline-block;
    background-image: url(../assets/image/common_sprite.png);
    background-repeat: no-repeat;
    vertical-align: top;
}
.fl-container .hd .more span.icon {
    width: 12px;
    height: 12px;
    margin-top: 9px;
    margin-left: 6px
}
.fl-container .hd .more span.icon-arrow-right {
    background-position: -68px 0
}
.fl-container .bd {
    margin-top: 14px;
    font-size: 0;
    text-align: left;
}
.fl-container .bd-l {
    display: inline-block;
    width: 288px;
    vertical-align: top;
}
.fl-container .bd-l .banner-box {
    position: relative;
}
.fl-products {
    display: inline-block;
    width: 912px;
    vertical-align: top;
}
.fl-products-item {
    display: inline-block;
    width: 212px;
    margin-left: 16px;
    margin-bottom: 16px;
    background-color: #fff;
    vertical-align: top;
}
.fl-products-item a:hover .product-content,.fl-products-item a:hover .product-sell {
    color: #FF734C
}
.fl-products-item .img-box.enlarge img {
    transition-duration: 0.8s;
    transform: scale(1.08,1.08)
}
.fl-products-item .img-box {
    width: 100%;
    height: 228px;
    overflow: hidden;
}
.fl-products-item .img-box img {
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    text-decoration: none;
}
.fl-products-item .product-content {
    padding: 10px 8px 14px;
    text-align: center;
    color: #232628;
}
.fl-products-item .product-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 20px;
}
.fl-products-item .product-price {
    margin-top: 5px;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
}
.fl-products-item .product-sell {
    margin-top: 6px;
    font-size: 12px;
    color: #71797F;
    line-height: 16px;
}
.product-sub {
    font-size: 14px;
    color: #FF734C;
    border: 1px solid #ff734c;
    display: inline-block;
    padding: 0 10px;
    margin-top: 4px;
    background: #FFF0EC;
    border-radius: 20px;
}
</style>